<template>
  <el-container v-loading="loading">

    <el-row>
      <el-button
        icon="fa fa-fw fa-refresh"
        size="mini"
        type="info"
        @click="handleRefresh">
      </el-button>

			<el-tag>上班人数：{{onwork_count}}</el-tag>
			<el-tag type="warning">下班人数：{{offwork_count}}</el-tag>
			 <el-select v-model="cateid" placeholder="请选择人员类型" @change="Select($event)">
				<el-option v-for="item in rylx"  :label="item.label" :value="item.cateid">
				</el-option> 
			</el-select>
			<el-input placeholder="请输入手机号" v-model="card_no" style="width: 200px;" />
			<el-button type="primary" icon="el-icon-search" @click="seach_btn">搜索</el-button>

			<div style="float: right;margin-right: 20px;">
				<el-date-picker
					v-model="value6"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					@change='download_btn'>
				</el-date-picker>
				<el-button type="primary"><a :href="url+'/index.php?s=home/excel/driver&time_area='+times" target="_blank" style='color: #fff;'>导出数据</a></el-button>
			</div>

    </el-row>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        prop="real_name"
        width="120"
        label="真实姓名">
      </el-table-column>

      <el-table-column
        prop="work_number"
        width="120"
        label="工号">
      </el-table-column>

      <el-table-column
        prop="work_phone"
        width="120"
        label="工作电话	">
      </el-table-column>

      <el-table-column
        prop="emergency"
        width="120"
        label="紧急联系人	">
      </el-table-column>

			 <el-table-column
			  prop="price"
			  width="120"
			  label="余额">
			</el-table-column>

      <el-table-column
        prop="id_card"
        width="150"
        label="身份证号"
        sortable>
      </el-table-column>

      <el-table-column
        prop="been_driving"
        label="驾龄"
        width="120"
        sortable>
      </el-table-column>

      <el-table-column
        prop="city"
        label="注册城市"
        width="120"
        sortable>
      </el-table-column>

			<el-table-column
			  prop="margin"
			  label="保证金"
			  width="120">
				<template slot-scope="scope">
				  <div v-if="scope.row.margin == ''">未缴纳</div>
					<div v-else>{{scope.row.margin}}</div>
				</template>
			</el-table-column>

      <el-table-column
        prop="id_card_pic.id_card_pic"
        label="身份证正面"
        width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.id_card_pic.id_card_pic" class="logo-img">
        </template>
      </el-table-column>

      <el-table-column
        prop="id_card_pic.id_card_fpic"
        label="身份证反面"
        width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.id_card_pic.id_card_fpic" class="logo-img">
        </template>
      </el-table-column>


      <el-table-column
        prop="period"
        label="驾证有效期"
        width="120"
        sortable>
      </el-table-column>

      <el-table-column
        prop="driving_license.driverPhoto"
        label="驾照正面照片"
        width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.driving_license.driverPhoto" class="logo-img">
        </template>
      </el-table-column>

      <el-table-column
        prop="driving_license.driverfPhoto"
        label="驾照反面照片"
        width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.driving_license.driverfPhoto" class="logo-img">
        </template>
      </el-table-column>

      <el-table-column
        prop="create_time"
        label="申请时间"
        width="180"
        sortable>
        <template slot-scope="scope">
          <i class="fa fa-clock-o fa-fw"></i>
          <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="用户状态"
        width="120"
        sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==0">禁止</el-tag>
          <el-tag v-if="scope.row.status==1">正常</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="audit"
        label="审核状态"
        width="120"
        sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.audit==0">待审核</el-tag>
          <el-tag v-if="scope.row.audit==1">审核通过</el-tag>
          <el-tag v-if="scope.row.audit==2">审核拒绝</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        width="413">
        label="操作">
        <template slot-scope="scope">
          <el-button
            icon="fa fa-fw fa-eye"
            size="mini"
            type="info"
            title="查看详情"
            @click="handleDataView(scope.$index, scope.row)">
            查看详情
          </el-button>
					<el-button
					  icon="el-icon-edit"
					  size="mini"
					  type="primary"
					  title="修改工号"
					  @click="save(scope.$index, scope.row)">
					  修改工号
					</el-button>
          <el-button
            icon="fa fa-fw fa-toggle-on"
            size="mini"
            type="success"
            title="启用"
            @click="handleRunnerUsingItem(scope.$index, scope.row)">
            启用
          </el-button>

          <el-button
            icon="fa fa-fw fa-toggle-off"
            size="mini"
            type="warning"
            title="停用"
            @click="handleRunnerDisableItem(scope.$index, scope.row)">
            停用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 提示 -->
    <el-dialog
      title="数据详情"
      :visible.sync="dialogVisible"
      width="700px">
      <div v-if="currentDataIndex != null">
        <!--
        create_time:'',                //类型：String  必有字段  备注：申请时间
        sex:'',                //类型：Number  必有字段  备注：无-->

        <p><span class="label">真实姓名：</span>{{tableData[currentDataIndex].real_name}}</p>
        <p><span class="label">工号：</span>{{tableData[currentDataIndex].work_number}}</p>
        <p><span class="label">工作电话：</span>{{tableData[currentDataIndex].work_phone}}</p>
        <p><span class="label">紧急联系人：</span>{{tableData[currentDataIndex].emergency}}</p>
				 <p><span class="label">余额：</span>{{tableData[currentDataIndex].price}}元</p>
        <p><span class="label">身份证：</span>{{tableData[currentDataIndex].id_card}}</p>
        <p><span class="label">驾龄：</span>{{tableData[currentDataIndex].been_driving}}</p>
        <p><span class="label">注册城市：</span>{{tableData[currentDataIndex].city}}</p>
        <p>
          <span class="label">身份证正面：</span>
          <img :src="tableData[currentDataIndex].id_card_pic.id_card_pic" class="big-img">
        </p>
        <p>
          <span class="label">身份证反面：</span>
          <img :src="tableData[currentDataIndex].id_card_pic.id_card_fpic" class="big-img">
        </p>
        <p><span class="label">驾证有效期：</span>{{tableData[currentDataIndex].period}}</p>
        <p>
          <span class="label">驾照正：</span>
          <img :src="tableData[currentDataIndex].driving_license.driverPhoto" class="big-img">
        </p>
        <p>
          <span class="label">驾照反：</span>
          <img :src="tableData[currentDataIndex].driving_license.driverfPhoto" class="big-img">
        </p>
        <p><span class="label">申请时间：</span>{{tableData[currentDataIndex].create_time}}</p>
      </div>
      <!--<p><span class="label">类型：</span>
        <el-tag v-if="tableData[currentDataIndex].type==1">跑腿</el-tag>
        <el-tag v-if="tableData[currentDataIndex].type==2">代驾</el-tag>
        <el-tag v-if="tableData[currentDataIndex].type==3">家政</el-tag>
      </p>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </el-container>
</template>

<script>
	import api from '@/fetch/api.js'
  export default {
    mounted: function () {
      this.getData();
    },
    methods: {
		
			save(index,o){
				let that = this;
				that.thatdata = o;
				this.$prompt('请修改工号', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({ value }) => {
					that.api.driver_save({id:o.id,work_number:value}).then((res)=>{
						if(res.code == 1){
							that.tableData[index].work_number = value;
							this.$message({
								type: 'success',
								message: res.msg
							});
						}else{
							this.$message.error(res.msg);
						}
						console.log(res)
					})
					// this.$message({
					// 	type: 'success',
					// 	message: '你的邮箱是: ' + value
					// });
				}).catch(() => {

				});
			},
      /**
       * 数据请求
       * */
      getData: function () {
        let _this = this;
        this.api.getDriverList({
          page: this.pagination.currentPage,
          rows: this.pagination.pageSize,
		  cateid:this.cateid,
					work_phone:this.card_no,
					time_area:this.times,
        }).then(function (res) {
          if (res.code == 1) {
            _this.tableData = res.data.driver.data;
            _this.pagination.total = res.data.driver.total;
						_this.offwork_count = res.data.offwork_count;
						_this.onwork_count = res.data.onwork_count;
          }
          _this.loading = false;
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange: function (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange: function (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      /**
       * 数据刷新
       */
      handleRefresh: function () {
				this.vaule6=''
				this.pagination.currentPage= 1
				this.card_no=''
				this.times=''
        this.getData();
        this.$message({
          showClose: true,
          message: '刷新成功',
          type: 'success'
        });
      },
      /**
       * 服务人员启用单条数据
       */
      handleRunnerUsingItem(index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm('此操作将启用该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.getDriverStatusUpdate({id: _id,status:0}).then(function (res) {
            if (res.code == 1) {
              _this.getData();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 服务人员停用单条数据
       */
      handleRunnerDisableItem(index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm('此操作将停用该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.getDriverStatusUpdate({id: _id,status:1}).then(function (res) {
            if (res.code == 1) {
              _this.getData();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 数据视图
       * */
      handleDataView: function (index, row) {
        this.currentDataIndex = index;
        this.dialogVisible = true;
      },
      /**
       * 表格选中状态记录
       * @param val
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
	  Select(k){
	  	let that = this;
		this.cateid = k;
	  },	
	  
	  
			seach_btn(){
				// if(!this.card_no){
				// 	this.$message({
				// 	  showClose: false,
				// 	  message: '手机号不能为空',
				// 	  type: 'warning',
				// 		duration:1000
				// 	});
				// 	return false;
				// }
				
				 this.value6=''
				 this.pagination.currentPage= 1
				 this.times=''
				 this.getData();
			},
			download_btn(){
				if(!this.value6){
					this.pagination.currentPage=1
					this.card_no = ''
					this.times = ''
					this.getData();
				}else{
					let times=this.value6[0]+'~'+this.value6[1]
					this.pagination.currentPage=1
					this.times = times
					this.card_no = ''
					this.getData();
				}
			}
    },
    data() {
      return {
				times:'',
				url:api.baseUrlPrefix,
				value6:'',
				card_no:'',
        loading: true,  // 页面加载
		  rylx: [
			  {cateid: '-1',label: '全部'},
			  {cateid: '0',label: '代驾'},
			  {cateid: '1',label: '司机'},
			  ],
			cateid:'',
				
        tableData: [
          {
            id: '',                //类型：Number  必有字段  备注：无
            name: '',                //类型：String  必有字段  备注：姓名
            uid: '',                //类型：Number  必有字段  备注：关联用户
            identity: '',                //类型：String  必有字段  备注：身份证
            card_front: '',                //类型：String  必有字段  备注：身份证正面
            card_back: '',                //类型：String  必有字段  备注：身份证反面
            type: 1,                //类型：Number  必有字段  备注：1，跑腿；2，代驾；3，家政
            create_time: '',                //类型：String  必有字段  备注：申请时间
            money: '',                //类型：String  必有字段  备注：余额
            license_front: '',                //类型：Mixed  必有字段  备注：驾照正面
            license_back: '',                //类型：Mixed  必有字段  备注：驾照反面
            health_front: '',                //类型：Mixed  必有字段  备注：健康证
            bond_price: '',                //类型：String  必有字段  备注：保证金金额
            status: '',                //类型：String  必有字段  备注：0禁用1启用
            user: {                //类型：Object  必有字段  备注：关联用户
              id: '',                //类型：Number  必有字段  备注：无
              nickname: '',                //类型：String  必有字段  备注：无
              sex: '',                //类型：Number  必有字段  备注：无
              phone: ''                //类型：String  必有字段  备注：无
            }
          }
        ],
        multipleSelection: [],
        pagination: {
          total: 5,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [5, 10, 20, 25, 30, 50, 100],
        },
        dialogVisible: false,   // 弹框
        currentDataIndex: null,
				offwork_count:'',
				onwork_count:'',
				thatdata:{}

      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .label {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-right: 15px;
  }

  .big-img {
    width: 400px;
    height: 200px;
  }
</style>
